<template>
  <div>
    <div
      class="loading"
      v-show="!Showpage"
    >

    </div>
    <div
      class="container"
      v-show="Showpage"
    >
      <div class="news-related">
        <div class="news-about">
          <div class="news-title">
            相关电影
          </div>
          <img
            :src="otherimg.img_url"
            alt=""
          >
        </div>
        <div class="news-actor">
          <div class="news-title">
            相关影人
          </div>
          <ul>
            <li
              v-for="(item, index) in actorimg"
              :key="index+40"
            >
              <img
                :src="item.img_url"
                alt=""
              >
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
        <hn></hn>
      </div>
      <div class="nav-container">
        <a
          href=""
          @click="gohome"
        >猫眼电影</a>
        >
        <a
          href=""
          @click="gohotspot"
        >热点</a>
        >
        <a
          href=""
          @click="gonews"
        >资讯正文</a>
      </div>
      <h1>{{message.title}}</h1>
      <div class="news-subtitle">
        <p>
          <span>猫眼电影</span>
          <span>上传时间&nbsp;8-10</span>
          <span>点击数&nbsp;{{message.zan}}</span>
        </p>
      </div>
      <div class="news-content">
        <p
          class=""
          v-for="(item, index) in message"
          :key="index"
        >{{item}}</p>
        <img
          :src="item.img_url"
          alt=""
          v-for="(item, index) in img"
          :key="item.id+index"
        >
        <div class="news-watch">
          <span>点赞:{{msg.zan}}</span>
          <span>□ 分享</span>
        </div>
      </div>

      <div class="nocontent">
        <newscontent></newscontent>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui";
let loading;
import hotnews from "./Qnews";
import content from "./Content";
export default {
  props: {},
  components: {},
  data() {
    return {
      Showpage: false,
      id: "",
      message: "",
      img: "",
      otherimg: "",
      actor: [],
      actorimg: [],
      msg: "",
      array: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getnewsinfo(this.id);
    this.getnewsimg(this.id);
    const startLoading = () => {
      // 使用Element loading-start 方法
      loading = Loading.service({
        lock: true,
        text: "加载中……",
        background: "rgba(255, 255, 255,0.1)",
      });
    };
    startLoading(); // 开启加载
  },
  methods: {
    async getnewsinfo(id) {
      let arr = [];
      const {
        data: { message },
      } = await this.Api.hotspot.getnewsinfo(id);
      this.message = message[0];
      this.msg = message[0];
      arr.push(message[0].eassy);
      arr.push(message[0].eassy_1);
      arr.push(message[0].eassy_2);
      this.geteassy(arr);
      this.getactor(message[0].eassy_3);
    },
    async getnewsimg(id) {
      let arr = [];
      let actor = [];
      let length = 0;
      const {
        data: { message },
      } = await this.Api.hotspot.getnewsimg(id);
      for (var i = 0; i < message.length - 1; i++) {
        for (var j = 0; j < message.length - 1 - i; j++) {
          if (message[j + 1].id > message[j].id) {
            var temp = message[j + 1];
            message[j + 1] = message[j];
            message[j] = temp;
          }
        }
      }
      actor = message.splice(0, 6);
      actor.reverse();
      this.otherimg = actor.splice(0, 1)[0];
      this.actorimg = actor;
      for (var i = 0; i < this.actorimg.length; i++) {
        this.actorimg[i].name = this.actor[i];
      }
      length =
        this.message.length > message.length
          ? this.message.length
          : message.length;
      message.reverse();
      for (var i = 0; i < length; i++) {
        if (message[i] != undefined) {
          arr.push(message[i]);
          if (this.message[i] != undefined) {
            arr.push(this.message[i]);
          }
        }
      }
      this.array = arr;
      this.img = message;
    },
    getactor(message) {
      let str = message;
      let arr = str.split("&");
      this.actor = arr;
    },
    geteassy(arr) {
      let array = [];
      // console.log(arr[0], arr[1]);
      arr.forEach((element) => {
        let temp = "";
        temp = element.split("&");
        for (var i = 0; i < temp.length; i++) {
          if (temp[i] != "") {
            array.push(temp[i]);
          }
        }
      });
      this.message = array;
    },
    gohome() {
      this.$router.push("/home");
    },
    gohotspot() {
      this.$router.push("/hotspot");
    },
    gonews() {
      this.$router.push("/hotspot/tab=2");
    },
    InitData() {
      setTimeout(() => {
        this.Showpage = true;
      }, 500);
      loading.close(); // 关闭加载
    },
  },
  components: {
    hn: hotnews,
    newscontent: content,
  },
  mounted() {
    this.InitData();
  },
};
</script>

<style lang="less" scoped>
.loading {
  width: 100%;
  height: 1200px;
  background-color: #fff;
}
.container {
  width: 1200px;
  height: auto;
  min-height: 500px;
  background-color: rgb(255, 255, 255);
  margin: 100px auto;
  .news-related {
    width: 365px;
    height: auto;
    min-height: 500px;
    float: right;
    background-color: rgb(255, 255, 255);
    .news-title {
      font-size: 20px;
      font-weight: 400;
      font-family: "Microsoft";
      line-height: 20px;
      padding-left: 10px;
      border-left: 3px solid #ef4238;
    }
    .news-about {
      margin-top: 20px;
      margin-bottom: 60px;
      width: 365px;
      img {
        display: block;
        margin-top: 30px;
      }
    }
    .news-actor {
      margin-bottom: 60px;
      ul {
        overflow: hidden;
        padding-left: 0px;
        li {
          list-style: none;
          margin-right: 10px;
          float: left;
          img {
            border-radius: 50%;
          }
          p {
            font-size: 14px;
            color: #333;
            margin-top: 8px;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
        }
      }
    }
  }
  .nav-container {
    color: #333;
    margin-bottom: 25px;
    a {
      font-size: 16px;
      color: inherit;
      text-decoration: none;
    }
  }
  h1 {
    font-size: 36px;
    color: #222;
  }
  .news-subtitle {
    font-size: 14px;
    color: #999;
    p {
      span {
        margin-right: 20px;
      }
    }
  }
  .news-content {
    float: none;
    width: 735px;
    // margin: auto;
    color: #333;
    font-size: 16px;
    line-height: 1.2;
    padding-top: 40px;
    text-align: justify;
    img {
      margin-top: 20px;
    }
    p {
      width: 735px;
      font-size: 16px;
      color: #333;
      text-align: left;
    }
    .news-watch {
      width: 240px;
      margin: 80px auto;
      span {
        border: 2px solid #ef4238;
        border-radius: 30px;
        line-height: 20px;
        font-size: 16px;
        padding: 10px 20px;
        margin-right: 20px;
      }
    }
  }

  .nocontent {
    margin-top: 40px;
  }
}
</style>